<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>虚拟磁盘</el-breadcrumb-item>
            <el-breadcrumb-item>全部</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="INDEX">
        </el-table-column>
        <el-table-column
          prop="name"
          label="VD NAME">
        </el-table-column>
        <el-table-column
          prop="address"
          label="POOL NAME">
        </el-table-column>
        <el-table-column
          prop=""
          label="CHUNK SIZE(KB)">
        </el-table-column>
        <el-table-column
          prop="address"
          label="RAID">
        </el-table-column>
        <el-table-column
          prop=""
          label="STATE">
        </el-table-column>
        <el-table-column
          prop="address"
          label="BAD BLOCKS">
        </el-table-column>
        <el-table-column
          prop="address"
          label="RAID">
        </el-table-column>
        <el-table-column
          prop="address"
          label="SFX USADE">
        </el-table-column>
        <el-table-column
          prop="address"
          label="CAPACITY(GB)">
        </el-table-column>
        <el-table-column
          prop="address"
          label="CURRENT HOME">
        </el-table-column>
        <el-table-column
          prop="address"
          label=" FUTURE HOME">
        </el-table-column>
        <el-table-column
          prop="address"
          label="PREFERRED HOME">
        </el-table-column>
        <el-table-column
          prop="address"
          label="WRITE BACK CACHE">
        </el-table-column>
        <el-table-column
          prop="address"
          label="MIRRORED">
        </el-table-column>
        <el-table-column
          prop="address"
          label="I/O ROUTING">
        </el-table-column>
        <el-table-column
          prop="address"
          label="JOBS">
        </el-table-column>
        <el-table-column
          prop="address"
          label="BACKGROUND JOB">
        </el-table-column>
      </el-table>
      <el-row></el-row>
      <el-row>
        <el-form class="left" labelPosition="left">
          <el-form-item label="CAPACITY" label-width="120px">
            <el-input style="width: 200px">max</el-input>
          </el-form-item>
          <el-form-item label="SFX USAGE" label-width="120px">
            <el-radio-group v-model="radio">
              <el-radio label="NONE"></el-radio>
              <el-radio label="READ"></el-radio>
              <el-radio label="READ/WRITE"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="STARTING INDEX" label-width="120px">
            <el-input style="width: 200px"></el-input>(0-8191)
          </el-form-item>
        </el-form>
        <el-button>Create Virtual Disk</el-button>
      </el-row>

    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        radio: '1'
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
